<template>
    <div class="rwt-split-area">
        <div class="wrapper" ref="my_bg">
            <div :class="[`rn-splite-style`, 'bg-color-blackest']">
                <div class="split-wrapper">
                    <div class="row no-gutters radius-10 align-items-center">
                        <div :class="[`col-lg-12 col-xl-6 col-12`, 'order-2']" style="position: relative">
                            <div class = "process" v-if="!isshow2">
                                <!--                                    <el-progress :percentage="percent" v-if="!isNaN(parseInt(percent))&&loading&&percent!==100"></el-progress>-->
                                <el-progress class="asprogress"
                                             :stroke-width="10"
                                             :percentage="percent" v-show="isshow"></el-progress>
                            </div>
                            <div class = "process" v-if="!isshow">
                                <!--                                    <el-progress :percentage="percent" v-if="!isNaN(parseInt(percent))&&loading&&percent!==100"></el-progress>-->
                                <el-progress class="asprogress"
                                             :stroke-width="10"
                                             :percentage="percent2" v-show="isshow2"></el-progress>
                            </div>
                            <div class="thumbnail" v-if="resImage.length===0&&!isshow&&!isshow2" style="height: 100%">
                                <el-image style="width: 700px; height:700px" :src="defaultImg" fit="cover" />
                            </div>
                            <!--                            列表轮播，用户请求了一组图片-->
                            <div v-if="resImage.length!==0&&!isshow&&!isshow2" style="width: 660px">
                                <el-carousel trigger="click" height="720px" :autoplay="false" ref="carousel" indicator-position="outside" @change="ODChange">
                                    <el-carousel-item v-for="(item,index) in resImage" :key="index" :name="item.query" >
                                        <div class="opBtn" @click="showOp=true" v-if="!showOp" style="position: relative;top:-4px;margin-top: 4px; height:50px">
                                            <i class="el-icon-s-operation"></i>
                                        </div>
                                        <div class="opBox" v-if="showOp&&resImage.length!==0" style="position: relative;top:-4px;margin-top: 4px; height:50px">
                                            <el-color-picker v-if="opType===1||opType===2" v-model="color" @active-change="changeColor" show-alpha/>
                                            <div v-if="opType===4" style="margin-left: 10px;display: flex;flex-direction: row;justify-content: center;align-items: center" >
                                                <span style="color: white">透明度</span>
                                                <div style="width: 70px;margin-left: 5px">
                                                    <el-slider v-model="opacity"></el-slider>
                                                </div>
                                            </div>
                                            <!-- 目标检测 -->
                                            <div v-if="opType===3&&showAll===false" class="button-group" @click="showAll=true"  style="margin-left: 10px">
                                                <Button title="查看全部" size="small" :outlined="true"/>
                                            </div>
                                            <div class="button-group" @click="showAll=false" style="margin-left: 10px" v-else-if="opType===3&&showAll===true">
                                                <Button title="查看部分" size="small" :outlined="true"/>
                                            </div>
                                            <!-- 其它 -->
                                            <div class="button-group" @click="cover=true" style="margin-left: 10px" v-if="!cover&&opType!=3">
                                                <Button title="显示原图" size="small" :outlined="true"/>
                                            </div>
                                            <div class="button-group" @click="cover=false" style="margin-left: 10px" v-else-if="opType!=3">
                                                <Button title="只看结果" size="small" :outlined="true"/>
                                            </div>
                                            <div class="button-group" @click="showImgModal(item)" style="margin-left: 10px;">
                                                <Button title="对比查看" size="small" :outlined="true"/>
                                            </div>
                                            <div v-if="opType===3" class="button-group" @click="downloadImage(item,3)" style="margin-left: 10px;margin-right: 10px">
                                                <Button title="下载结果" size="small" :outlined="true"/>
                                            </div>
                                            <div v-else>
                                                <div class="button-group" @mouseenter="download=true" style="margin-left: 10px;">
                                                    <Button title="下载结果" size="small" :outlined="true"/>
                                                </div>
                                                <ul class="download" v-if="download" @mouseleave="download=false">
                                                    <li>
                                                        <div class="button-group" @click="downloadImage(item,1)" >
                                                            <Button title="黑色底图" size="small" :outlined="true"/>
                                                        </div>
                                                    </li>
                                                    <li>
                                                        <div class="button-group"  @click="downloadImage(item,2)" >
                                                            <Button title="透明底图" size="small" :outlined="true"/>
                                                        </div>
                                                    </li>
                                                    <li>
                                                        <div class="button-group" @click="downloadImage(item,3)" >
                                                            <Button title="包含原图" size="small" :outlined="true"/>
                                                        </div>
                                                    </li>
                                                </ul>
                                            </div>
                                            <!-- 目标检测专用 选择查看特定目标类型框-->
                                            <div v-if="opType===3">
                                                <!-- 未检测到任何目标 -->
                                                <div v-if="item.result.result['playground'].length === 0 && item.result.result['oiltank'].length === 0 && item.result.result['overpass'].length === 0 && item.result.result['aircraft'].length === 0">
                                                    <div class="button-group">
                                                        <Button title="暂无目标" size="small" :outlined="true" />
                                                    </div>
                                                </div>
                                                <!-- 检测到目标 -->
                                                <div v-for="(item2, index2) in item.result.result" :key="index2">
                                                    <div v-if="item2.length > 0">
                                                        <div class="button-group" @mouseenter="showList[index2]=true" @click="showType(index, index2)">
                                                            <Button :title="index2 + '(' + item2.length + ')'" size="small" :outlined="true" style="width: 120px; font-size: 12px"/>
                                                        </div>
                                                        <el-scrollbar v-if="showList[index2]" @mouseleave.native="showList[index2]=false">
                                                            <div v-for="(item3, index3) in item2" :key="index3">
                                                                <div @click="changeShow(item3.id)">
                                                                    <Button :title="item3.score.toFixed(2) + (indexNumber.indexOf(item3.id)!==-1?'  √':'')" size="small" :outlined="true" style="width: 110px; margin-top: 2px; height: 35px;"/>
                                                                </div>
                                                            </div>
                                                        </el-scrollbar>
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- 更多功能 -->
                                            <div>
                                                <div class="button-group" style="margin-left: 10px;" @mouseenter="moreFunc=true">
                                                    <Button title="更多功能" size="small" :outlined="true"/>
                                                </div>
                                                <ul class="download" v-if="moreFunc" @mouseleave="moreFunc=false">
                                                    <li v-for="(item,index) in splitData.links" :key="index">
                                                        <div class="button-group" @click="switchFunc(item.funcLink)">
                                                            <Button :title="item.funcName" size="small" :outlined="true"/>
                                                        </div>
                                                    </li>
                                                </ul>
                                            </div>

                                            <div class="opBtn2" @click="showOp=false" style="height:50px">
                                                <i class="el-icon-d-arrow-left"></i>
                                            </div>

                                        </div>
                                        <div class="thumbnail" style="position: relative;" id="show-img">
                                            <!-- 原图 -->
                                            <img v-if="cover" :src="item.query" alt="Split Image" style="position: absolute;"/>
                                            <!-- 纯黑图 -->
                                            <img v-else-if="opType!==3" :src="blackImg" alt="Split Image" style="position: absolute; "/>
                                            <!-- 目标检测专用 -->
                                            <DrawEdge @click.native="showOne(index, $event)" :myIndex="index" v-if="opType===3" :src="item.query" :result="[...item.result.result['overpass'], ...item.result.result['oiltank'], ...item.result.result['playground'], ...item.result.result['aircraft']]" :indexNumber="indexNumber" :showAll="showAll"></DrawEdge>
                                            <!-- 结果图 -->
                                            <img v-if="opType===4" :src="item.result" alt="Split Image" :style="{position: 'absolute',opacity: opacity/100}" />
                                            <span v-if="opType===1||opType===2" class="result-image" :style="{WebkitMask: 'url(' + item.result + ') no-repeat', backgroundColor: color}"></span>
                                        </div>
                                    </el-carousel-item>
                                </el-carousel>
                            </div>
                        </div>
                        <div :class="[`col-lg-12 col-xl-6 col-12`, 'order-1']" style="min-width: 750px;">
                            <div class="split-inner" >
                                <div style="display: flex;flex-direction: row">
                                    <h4 class="title">{{ splitData.title }}</h4>
                                    <Button :read-more-button="true" style="margin-left: 30px;margin-top: 15px" v-for="(item,index) in splitData.links" :key="index" :url="item.funcLink">
                                        <!--                                            <router-link :to="{name:item.funcLink,params:{data:fileList}}"><span>{{item.funcName}}</span></router-link>-->
                                        <span @click="obtainList=true">{{item.funcName}}</span>
                                    </Button>
                                </div>

                                <p class="description">{{ splitData.description }}</p>
                                <div style="display: flex;flex-direction: row;">
                                    <!--                                    上传图片组件-->
                                    <PhotoList ref="photoList" @handleRemove="removeResItem" @showTarget="showSingleRes"/>
                                </div>
                                <div style="display: flex;flex-direction: row;margin-top: 20px;">
                                    <button
                                            class="btn-default"
                                            @click="showResult">运行全部
                                    </button>
                                    <button
                                            style="margin-left: 30px;"
                                            class="btn-default"
                                            @click="callDrawer">打开图片库
                                    </button>
                                    <Button :read-more-button="true" style="margin-left: 30px;margin-top: 15px">
                                        <span @click="resetImg">清空图片</span>
                                    </Button>
                                    <Button :read-more-button="true" style="margin-left: 30px;margin-top: 15px">
                                        <span @click="runDemo">示例图片</span>
                                    </Button>
                                    <!--                                    <el-color-picker v-model="color" @active-change="changeColor" style="margin-left: 20px;" show-alpha v-if="opType!==3"/>-->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <ImgDialog ref="imgmodal"/>
    </div>
</template>

<script>
    import Layout from '../common/Layout'
    import Split from "../elements/split/Split";
    import ImgDialog from "../modal/ImgDialog";
    import PhotoList from "./PhotoList";
    import Button from "../elements/button/Button";
    import eventBus from "../../global/eventBus";
    import DrawEdge from "./DrawEdge.vue"
    // import qs from 'qs'
    export default {
        name: "UploadPic",
        components:{Button, PhotoList, ImgDialog, Layout,Split, DrawEdge},
        data(){
            return{
                moreFunc:false,
                obtainList:false,//跳转时是否保存列表
                download:false,
                showOp:true,//是否有返回的结果（一张或者一组），决定是否展示对于图片的操作菜单
                cover:false,//是否显示原图叠加结果
                loading:false,//是否正在加载
                uid:this.$ls.get('userInfo')===null?'':this.$ls.get('userInfo').id,
                resImage:[], //返回的图片
                defaultImg:'',//默认图片、结果存放
                blackImg: 'https://cdn.bewcf.info/softwareCup/554bea32-5dd5-44d0-9511-5b4b3084821d.png',//默认纯黑图（底图）
                color:'rgba(255, 255, 255, 1)', //结果图片颜色
                percent:0,//总体的进度
                percent2: 0,//单张图片的进度
                url:"",
                opacity:100,
                isshow: false,
                isshow2: false,
                num: 0,
                Width:{
                    "width":"0px",
                },
                // colorImg:''
                //目标检测相关参数
                showAll: true,
                indexNumber: [],
                showList: {
                    "overpass": false,
                    "oiltank": false,
                    "playground": false,
                    "aircraft": false,
                },
            }
        },
        props: {
            // 1 目标提取
            // 2 变化检测单独有个文件
            // 3 目标检测
            // 4 地物分类
            opType:{
                type:Number,
                default:1
            },
            splitData: {
                image:'',
                links:[],
                title: '',
                description: '',
            }
        },
        created() {
            this.defaultImg=require('../../assets/images/functions/'+this.splitData.image)
            this.url=this.genUrl(this.opType)
            // console.log(this.url)
            this.$on('setItem',data=>{
                // console.log('在setItem')
                this.$nextTick(function () {
                    this.$refs.carousel.setActiveItem(data)
                })

            })
            this.$on('downloadImg',data=>{
                let image = new Image();
                // 解决跨域 Canvas 污染问题
                image.setAttribute("crossOrigin", "anonymous");
                image.onload = function () {
                    let canvas = document.createElement("canvas");
                    canvas.width = image.width;
                    canvas.height = image.height;
                    let context = canvas.getContext("2d");
                    context.drawImage(image, 0, 0, image.width, image.height);
                    let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
                    let a = document.createElement("a"); // 生成一个a元素
                    let event = new MouseEvent("click"); // 创建一个单击事件
                    var name = data.split('/')
                    a.download = name[name.length-1] // 设置图片名称
                    a.href = url; // 将生成的URL设置为a.href属性
                    a.dispatchEvent(event); // 触发a的单击事件
                };
                image.src=data
            })
        },
        mounted() {
            this.resImage=this.$ls.get('resImage'+this.opType,[])
        },
        beforeDestroy() {
            // console.log('在beforeDestroy')
            // console.log(this.obtainList)
            if(this.obtainList){
                this.$ls.set('fileList',this.$refs.photoList.fileList)
                this.$ls.set('resImage'+this.opType,this.resImage)
            }else {
                this.$ls.remove('fileList')
                this.$ls.remove('fileList2')
                for(var i=1;i<=4;++i){
                    this.$ls.remove('resImage'+i)
                }
            }
        },
        methods:{
            //获得图片尺寸
            getImageSize(url) {
                return new Promise((resolve) => {
                    var img = document.createElement("img");
                    img.src = url;
                    img.onload = () => {
                        resolve({width:img.naturalWidth,height: img.naturalHeight});
                    };
                });
            },
            //目标检测，鼠标点击改变显示状态（图片宽度660）
            showOne(index,event) {
                if (this.opType === 3) {
                    let x = event.offsetX
                    let y = event.offsetY
                    let ratio = null
                    this.getImageSize(this.resImage[index].query).then((data) => {
                        ratio = data.width / 660
                        x = x * ratio
                        y = y * ratio
                        for (let item in this.resImage[index].result.result) {
                            this.resImage[index].result.result[item].forEach(item2 => {
                                if (item2.bbox[0] <= x && x <= item2.bbox[0] + item2.bbox[2] && item2.bbox[1] <= y && y <= item2.bbox[1] + item2.bbox[3]) {
                                    this.changeShow(item2.id)
                                }
                            })
                        }
                    })
                }
            },
            //目标检测，改变某一类显示状态
            showType(index, type) {
                this.showAll = false
                let flag = true
                //显示全部
                this.resImage[index].result.result[type].forEach(item => {
                    if (this.indexNumber.indexOf(item.id) === -1) {
                        flag = false
                        this.indexNumber.push(item.id)
                    }
                })
                //取消全部
                if (flag) {
                    this.resImage[index].result.result[type].forEach(item => {
                        this.indexNumber = this.indexNumber.filter(item2 => item2 !== item.id)
                    })
                }
            },
            //目标检测，改变目标是否显示
            switchFunc(url){
                // console.log('在切换功能')
                this.obtainList=!this.obtainList
                this.$router.push({name:url})
            },
            //目标检测，改变是否显示
            changeShow(id) {
                this.showAll = false
                if (this.indexNumber.indexOf(id) !== -1) {
                    this.indexNumber = this.indexNumber.filter(item => item !== id)
                }
                else this.indexNumber.push(id)
            },
            //目标检测，轮播图变动时执行
            ODChange() {
                this.showAll = true
                this.indexNumber = []
            },
            callDrawer(){
                eventBus.$emit('callDrawer',true)
            },

            genUrl(index){
                var url=''
                switch (index) {
                    case 1:
                        // console.log('目标提取')
                        url=this.$global.apiUrl+'ai/objectExtraction'
                        break
                    case 3:
                        // console.log('目标检测')
                        url=this.$global.apiUrl+'ai/objectDetection'
                        break
                    case 4:
                        // console.log('地物分类')
                        url=this.$global.apiUrl+'ai/terrainClassification'
                        break
                    default:break
                }
                return url
            },
            // 下载图片
            downloadImage(item,index) {
                //黑底1，透明2，有底3
                // console.log('在下载')
                if(this.opType===3){ //目标检测
                    this.$emit('downloadImg',item.result.url)
                    return
                }
                var that=this
                const paramData={}
                if(this.opType===4){ //地物分类
                    paramData.opacity=this.opacity/100
                }
                paramData.result=item.result
                paramData.rgba=that.color
                if(index===2){//透明底图
                    paramData.transparent=1
                }else { //有底的图和黑色的图
                    paramData.file=index===1?'':item.query
                }
                this.$axios.post(this.$global.apiUrl+'file/overlay',null,{params:paramData
                }).then(res=>{
                    // console.log(res.data)
                    this.$emit('downloadImg',res.data.data)
                }).catch(error=>{
                    console.log(error)
                    that.$message.error('网络错误，稍后再试');
                })
            },
            removeResItem(file){
                this.resImage.forEach(item=>{
                    if(file.url===item.query){
                        this.resImage.splice(this.resImage.indexOf(item),1)
                    }
                })
            },
            //改变结果图片颜色
            changeColor(e) {
                this.color = e
            },
            //接收单张图片请求
            showSingleRes(data){
                if(this.resImage.length!==0&&this.isAlreadyChecked(data.url)){//结果列表中已经有这个结果
                    this.$refs.carousel.setActiveItem(data.url)
                }else { //没有请求过
                    var url=this.url
                    this.isshow2 = true
                    this.percent2 = 0
                    if(url!==''){
                        var that = this
                        this.$axios.post(url, null, { params: {
                                file:data.url4req,
                                userId:that.uid
                            }})
                            .then(res=>{
                                var temp={
                                    query:data.url,
                                    result:res.data.data
                                }
                                this.processOn2(temp)
                                //that.resImage.push(temp)
                                that.loading=false//结束加载状态
                                setTimeout(()=>{
                                    this.$emit('setItem',data.url)},
                                    3000)

                            }).catch(function(error) {
                            console.log(error);
                            that.$message.error('网络错误，稍后再试');
                            that.isshow=that.isshow2=false
                        });
                    }
                }
            },
            //改变进度条状态
            processOn(data){
                //目标检测画框
                if (this.opType === 3) {
                    for (let key in data.result.result) {
                        data.result.result[key].forEach(item => {
                            // console.log(item.bbox);
                        })
                    }
                }
                // 这里不知道为什么要加一才行
                this.percent=parseInt((this.resImage.length+1)/this.$refs.photoList.fileList.length*100)
                this.resImage.push(data)
                if(this.percent2>=100||this.percent>=100){
                    // console.log("mounted");
                    var a=0;
                    var id=setInterval(()=>{
                        a=this.percent;
                        // console.log("a is"+a+typeof a);
                        if(a===100){
                            clearInterval(id);
                            this.isshow = false;
                            this.isshow2 = false;
                            this.percent = 0;
                            // console.log("执行了clearInterval函数");
                        }
                    },1000);
                    //this.percent=100;//结束加载状态
                    //setTimeout(this.isshow=false,30000);
                    this.$message({
                        message: '请求成功！',
                        type: 'success'
                    });
                    return this.percent;
                }
            },
            processOn2(data){
                //目标检测画框
                if (this.opType === 3) {
                    for (let key in data.result.result) {
                        data.result.result[key].forEach(item => {
                            // console.log(item.bbox);
                        })
                    }
                }
                // 这里不知道为什么要加一才行
                this.percent2=100
                this.percent=parseInt((this.resImage.length+1)/this.$refs.photoList.fileList.length*100)
                this.resImage.push(data)
                if(this.percent2>=100){
                    // console.log("mounted");
                    var a=0;
                    var id=setInterval(()=>{
                        a=this.percent>this.percent2?this.percent:this.percent2;
                        this.percent2 = 0;
                        // console.log("a is"+a+typeof a);
                        if(a===100){
                            clearInterval(id);
                            this.isshow = false;
                            this.isshow2 = false;
                            // console.log("执行了clearInterval函数");
                        }
                    },1000);
                    //this.percent=100;//结束加载状态
                    //setTimeout(this.isshow=false,30000);
                    this.$message({
                        message: '请求成功！',
                        type: 'success'
                    });
                    return this.percent;
                }
            },
            // 示例图片
            runDemo() {
                this.$refs.photoList.runDemo(this.opType)
            },
            //查询一张图片
            getOneResult(i) {
                let that = this
                while(this.isAlreadyChecked(that.$refs.photoList.fileList[i].url)){
                    i++;
                    if(i>this.$refs.photoList.fileList.length-1){
                        return
                    }
                }
                this.isshow2 = false
                this.isshow = true
                let item = that.$refs.photoList.fileList[i]
                this.$axios.post(that.url, null, { params: {
                        file:item.url4req,
                        userId:that.uid
                    }})
                    .then(res=>{
                        var temp={
                            query:item.url,
                            result:res.data.data
                        }
                        this.percent=parseInt((this.resImage.length)/this.$refs.photoList.fileList.length*100);
                        // console.log(this.percent)
                        this.processOn(temp)
                        i++;
                        if (i < that.$refs.photoList.fileList.length) {
                            that.getOneResult(i)
                        }
                    }).catch(function(error) {
                    console.log(error);
                    that.$message.error('网络错误，稍后再试');
                    that.isshow=that.isshow2=false
                });
            },
            isLoading(fileList){
                var flag=false
                fileList.forEach(item=>{
                    if(item.loading){
                        flag=true
                    }
                })
                return flag
            },
            // 请求功能接口
            showResult(){
                // console.log('在请求列表')
                if(this.$refs.photoList.fileList.length===0){
                    this.$message.error('请上传图片');
                }else if(this.isLoading(this.$refs.photoList.fileList)){
                    this.$message.error('您操作太快了，请等待图片上传完成');
                } else{
                    this.loading=true
                    var url=this.url
                    if(url!==''){
                        this.getOneResult(0)
                    }
                }
            },

            isAlreadyChecked(url){
                var flag=false
                this.resImage.forEach(item=>{
                    if(item.query===url){
                        // console.log('已经在了')
                        flag = true
                    }
                })
                return flag
            },
            // 清空图片
            resetImg(){
                // this.percent=0
                this.resImage=[]
                this.defaultImg=require('../../assets/images/functions/'+this.splitData.image)
                this.$refs.photoList.fileList=[]
                this.percent = 0;
                this.percent2 = 0;
                this.$ls.remove('fileList')
                this.$ls.remove('fileList2')
                for(var i=1;i<=4;++i){
                    this.$ls.remove('resImage'+i)
                }

            },
            showImgModal(item){
                this.$refs.imgmodal.query = item.query
                this.$refs.imgmodal.result = item.result
                if (this.opType === 3) this.$refs.imgmodal.result = item.result.url
                this.$refs.imgmodal.cover = this.cover
                this.$refs.imgmodal.color = this.color
                this.$refs.imgmodal.opType = this.opType
                this.$refs.imgmodal.opacity = this.opacity
                // console.log(item.result)
                this.$refs.imgmodal.show();
            }
        }
    }
</script>

<style scoped>
    @-webkit-keyframes mymove{ /* Safari and Chrome */
        0% {
            opacity: 1;
        }

        100% {
            opacity: 0;
        }

    }

    .asprogress {
        /*background: rgba(255,255,255,0.1);*/
        width: 80%;
        height: 600px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 10%;
    }
    .asprogress .el-progress-bar__inner {
        content:"";
        width:100%;
        height:100%;
        display:block;
        background-color:transparent;
        background-image: linear-gradient(to right, #6549D5,#FB5343 , #E33FA1);
    }

    .opBtn{
        position: absolute;
        top:0;
        left: 0;
        height: 30px;
        width: 30px;
        z-index: 9;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.7);
        background:rgba(127,127,127,0.5);
        font-size: 20px;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .opBtn2{
        font-size:30px;
        color: #E7E6E6;
        margin-top: -5px;
    }
    .opBox{
        position: absolute;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-around;
        /*width: 120px;*/
        height: auto;
        top:0;
        bottom: 50px;
        padding-top: 5px;
        z-index: 9;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.7);
        background:rgba(127,127,127,0.5);
    }

    .result-image {
        width: 100%;
        height: 100%;
        position: absolute;
        display: inline-block;
        background-color: #ffffff;
        mask: url(https://cdn.bewcf.info/softwareCup/e944fccc-c8e4-4340-af57-129918a193b8.png) no-repeat;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        mask-size: contain !important;
        mask-position: center !important;
    }

    .download{
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.7);
        background:rgba(127,127,127,0.5);
        padding-left: 5px;
        height: 180px;
        position: relative;
        left: 20px;
        top: -5px;
        border-radius: 5px;
    }

    .download li{
        list-style-type:none;
    }
    /*/deep/ .el-scrollbar__wrap {*/
    /*    overflow-x: hidden;*/
    /*}*/

    .el-scrollbar {
        margin-top: 5px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.7);
        background-color: rgba(127,127,127,0.5);
        /* max-height: 250px !important; */
        padding-top: 5px ;
        padding-left: 5px;
        border-radius: 5px;
    }
    

</style>
